<template>
	<view class="content">
		<view class="goods-jiesuan">
			<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png" v-if="!xuanzhong"></image>
			<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/xuanzhong%402x.png" v-if="xuanzhong"></image>
			<view class="goods-selectAll">全选 </view>
			<view class="goods-heji">合计：<a>￥{{totalPrice}}</a></view>
			<view class="goods-jiesuan-button" @tap="goConfirmOrder()">结算</view>
		</view>
		<view class="goods-box">
			<view class="goods-box-tittle">
				<image class="goods-box-tittle-switch" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png"
				 v-if="shixiao&&!xuanzhong"></image>
				<image class="goods-box-tittle-switch" src="../../static/imgs/weixuanzhong@2x.png" v-if="shixiao&&xuanzhong"></image>
				<view class="goods-box-tittle-text">时尚家居</view>
				<image class="goods-box-tittle-icon" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
			</view>
			<view class="goods-box-items">
				<image class="goods-box-switch" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png" v-if="shixiao&&!xuanzhong"></image>
				<image class="goods-box-switch" src="../../static/imgs/weixuanzhong@2x.png" v-if="shixiao&&xuanzhong"></image>
				<image class="goods-box-img" src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/no_img.png"></image>
				<view class="goods-box-infos">
					<view class="goods-box-infos-tittle">冬季加厚保暖珊瑚绒四件套双面绒火速回复额和素娥回复防护</view>
					<view class="goods-box-infos-style">蓝色2.0M床单式 被套20…</view>
					<view class="goods-box-b">
						<view class="goods-box-price">￥200</view>
						<view class="goods-box-num">
							<view class="goods-box-num-l">-</view>
							<view class="goods-box-num-m">{{num}}</view>
							<view class="goods-box-num-r">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="goods-box">
			<view class="goods-box-tittle">
				<image class="goods-box-tittle-switch" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png"
				 v-if="shixiao&&xuanzhong"></image>
				<image class="goods-box-tittle-switch" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/xuanzhong%402x.png"
				 v-if="shixiao&&!xuanzhong"></image>
				<view class="goods-box-tittle-text">时尚家居</view>
				<image class="goods-box-tittle-icon" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
			</view>
			<view class="goods-box-items" v-for="(item,ndex) in 2">
				<image class="goods-box-switch" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png" v-if="shixiao&&xuanzhong"></image>
				<image class="goods-box-switch" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/xuanzhong%402x.png" v-if="shixiao&&!xuanzhong"></image>
				<image class="goods-box-img" src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/no_img.png"></image>
				<view class="goods-box-infos">
					<view class="goods-box-infos-tittle">冬季加厚保暖珊瑚绒四件套双面绒火速回复额和素娥回复防护</view>
					<view class="goods-box-infos-style">蓝色2.0M床单式 被套20…</view>
					<view class="goods-box-b">
						<view class="goods-box-price">￥200</view>
						<view class="goods-box-num">
							<view class="goods-box-num-l">-</view>
							<view class="goods-box-num-m">{{num}}</view>
							<view class="goods-box-num-r">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 失效部分 -->
		<view class="goods-box">
			<view class="goods-box-tittle">
				<image class="goods-box-tittle-switch" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/weixuanzhong%402x.png"
				 v-if="shixiao&&xuanzhong"></image>
				<image class="goods-box-tittle-switch" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/xuanzhong%402x.png"
				 v-if="shixiao&&xuanzhong"></image>
				<view class="goods-box-tittle-shixiao" v-if="shixiao"></view>
				<view class="goods-box-tittle-text">时尚家居</view>
				<image class="goods-box-tittle-icon" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
			</view>
			<view class="goods-box-items" v-for="(item,ndex) in 2">
				<image class="goods-box-switch" src="../../static/imgs/weixuanzhong@2x.png" v-if="shixiao&&xuanzhong"></image>
				<image class="goods-box-switch" src="../../static/imgs/weixuanzhong@2x.png" v-if="!shixiao&&xuanzhong"></image>
				<view class="goods-box-shixiao" v-if="shixiao">失效</view>
				<image class="goods-box-img" src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/no_img.png"></image>
				<view class="goods-box-infos">
					<view class="goods-box-infos-tittle">冬季加厚保暖珊瑚绒四件套双面绒火速回复额和素娥回复防护</view>
					<view class="goods-box-infos-style">蓝色2.0M床单式 被套20…</view>
					<view class="goods-box-b">
						<view class="goods-box-price">￥200</view>
						<view class="goods-box-num">
							<view class="goods-box-num-l">-</view>
							<view class="goods-box-num-m">{{num}}</view>
							<view class="goods-box-num-r">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				num: 1,
				shixiao: true,
				totalPrice: '200+200MGT',
				xuanzhong: false
			}
		},
		onLoad() {

		},
		methods: {
			goConfirmOrder() {
				uni.navigateTo({
					url: '../goods/goods-orderConfirm/goods-orderConfirm'
				})
			}

		}
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
	}

	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 60px;
	}

	.goods-box {
		height: 100%;
		margin: 10px 10px 0 10px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2px 12.5px 0px rgba(153, 153, 153, 0.1);
		border-radius: 5px;
	}

	.goods-box-tittle {
		width: 100%;
		height: 45px;
		border-bottom: 1px solid #E5E5E5;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-box-items {
		width: 100%;
		height: 100px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.goods-box-tittle-switch {
		width: 30px;
		height: 30px;
		margin: 7.5px 5px;
	}

	.goods-box-tittle-icon {
		width: 5px;
		height: 9px;
		margin-top: 18px;
	}

	.goods-box-tittle-text {
		margin-right: 6px;
		height: 45px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 45px;
	}

	.goods-box-switch {
		width: 30px;
		height: 30px;
		margin: 35px 5px;
	}

	.goods-box-img {
		width: 80px;
		height: 80px;
		margin: 10px 10px 10px 0;
	}

	.goods-box-infos {
		height: 100px;
		position: absolute;
		left: 140px;
		right: 15px;
	}

	.goods-box-infos-tittle {
		height: 33px;
		width: 100%;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 11px;
	}

	.goods-box-infos-style {
		width: 100%;
		height: 11px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 8px;
		line-height: 11px;
	}

	.goods-box-b {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-box-price {
		height: 12px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 67, 56, 1);
		line-height: 12px;
		margin-top: 15px;
	}

	.goods-box-num {
		width: 65px;
		height: 21px;
		display: flex;
		position: absolute;
		right: 15px;
	}

	.goods-box-num-l {
		width: 15px;
		height: 21px;
		line-height: 18px;
		text-align: left;
		margin-top: 5.5px;
		color: rgba(216, 216, 216, 1);
	}

	.goods-box-num-r {
		width: 16px;
		height: 21px;
		line-height: 18px;
		text-align: right;
		margin-top: 5.5px;
		color: #333333;
		font-size: 18px;
	}

	.goods-box-num-m {
		width: 34px;
		height: 21px;
		text-align: center;
		line-height: 21px;
		margin-top: 5.5px;
		background: rgba(245, 245, 245, 1);
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.goods-box-shixiao {
		width: 24px;
		height: 14px;
		background: rgba(187, 187, 187, 1);
		border-radius: 2px;
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 14px;
		text-align: center;
		margin-top: 42.5px;
		margin: 42.5px 8px;
	}

	.goods-box-tittle-shixiao {
		width: 24px;
		height: 14px;
		border-radius: 2px;
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 14px;
	}

	.goods-jiesuan {
		width: 100%;
		height: 55px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 999;
	}

	.goods-jiesuan image {
		width: 30px;
		height: 30px;
		margin: 12.5px 10px;
	}

	.goods-selectAll {
		height: 55px;
		line-height: 55px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.goods-heji {
		height: 55px;
		line-height: 55px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		right: 135px;
		display: flex;
	}

	.goods-heji a {
		font-size: 14px;
		font-weight: 500;
		color: rgba(254, 67, 56, 1);
	}

	.goods-jiesuan-button {
		width: 115px;
		height: 40px;
		text-align: center;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 40px;
		background: rgba(254, 67, 56, 1);
		border-radius: 2px;
		position: absolute;
		right: 10px;
		top: 7.5px;
	}
</style>
